<template>
	<view class="body" style="width: 720rpx;margin: 0 auto;"> 
		<view style="width: 100%;height: 100px;" class="item-info d-flex align-center j-sb my-2" @click="lotteryDetail(product)">
          <view class="img-div">
			  <img :src="product.good_header" alt="">
			 <!-- <image style="width: 92px height: 100px;" :src="product.good_header" mode="heightFix"></image> -->
		  </view>
		  <view class="d-flex flex-column j-center item-info-right">
			  <view class="item-info-title f12">
				  {{product.good_name}}
			  </view>
			  <view class="item-info-title">
			  	<text style="font-size: 12px;">
						<!-- 总需人次： -->
						{{i18n.home_page.good_details.t50}}：
					<text class="font-color-red f13">
						{{product.canyurenshu}}
					</text>
					<!-- 人次 -->
					{{i18n.home_page.good_details.t51}}
				</text>
			  </view>
		  </view>
		</view>
		<view class="item-chart charts-box lineChart d-flex">
			<!-- 注意：这里的opts是uCharts的配置，eopts是ECharts的配置，不要搞混，如果不需要用在各种小程序端，是不需要传uCharts的opts的，只需要传eopts即可！！！这里加opts是为了覆盖uCharts的rose图的默认图例配置的位置 -->
			<view class="left-chart d-flex flex-column">
				<view class="f10">
					<!-- 尾 -->
					{{i18n.home_page.good_details.t58}}
				</view>
				<view class="f10">
					<!-- 后 -->
					{{i18n.home_page.good_details.t59}}
				</view>
				<view class="f10">
					<!-- 中 -->
					{{i18n.home_page.good_details.t60}}
				</view>
				<view class="f10">
					<!-- 前 -->
					{{i18n.home_page.good_details.t61}}
				</view>
				<view class="f10">
					<!-- 头 -->
					{{i18n.home_page.good_details.t62}}
				</view>
			</view>
			<qiun-data-charts type="area" :eopts="eopts" :chartData="chartsDataLine3" :echartsH5="true" :ontouch="true" :inScrollView="true"
				:echartsApp="true" />
		</view>
		<view class="item-bottom mt-2">
			<view class="d-flex j-sb a-center header item-list">
				<view class="flex-1 f10">
					<!-- 期数 -->
					{{i18n.home_page.good_details.t52}}
				</view>
				<view  class="flex-1 f10">
					<!-- 中奖者 -->
					{{i18n.home_page.good_details.t53}}
				</view>
				<view  class="flex-1 f10">
					<!-- 幸运号 -->
					{{i18n.home_page.good_details.t54}}
				</view>
				<view class="flex-1 f10">
					<!-- 位次 -->
					{{i18n.home_page.good_details.t55}}
				</view>
				<view  class="flex-1 f10">
					<!-- 参与人次 -->
					{{i18n.home_page.good_details.t56}}
				</view>
				<view  class="flex-1 f10">
					<!-- 区间 -->
					{{i18n.home_page.good_details.t57}}
				</view>
			</view>
			<view v-for="item in list" class="d-flex j-sb a-center  item-list">
				<view class="flex-1">{{item.qishu}}</view>
				<view  class="flex-1 burt_ellipsis">{{item.q_user}}</view>
				<view  class="flex-1 text-red">{{item.q_user_code}}</view>
				<view class="flex-1"> {{item.goucount}}</view>
				<view  class="flex-1">{{item.buycount}}</view>
				<view  class="flex-1 text-red">{{item.position}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLotteryAssistantData
	} from '@/api/lottery.js';

	export default {
		data() {
			return {
				chartsDataLine3: {},
				eopts: {},
				id: '',
				token: '',
				isLogin: false,
				balance: 0,
				num: 1,
				item: {},
				preItem: false,
				preUser: '',
				preRecord: '',
				gonumber: 0,
				list: [],
				canPay: true,
				flushId: 0,
				time: 3,
				myChart: {},
				chartData: [],
				xAxisData: [],
				max_qishu: 0,
				min_qishu: 0,
				max: '',
				size: '12',
				progress: 0,
				seconds: 0,
				secondInfo: '',
				product: {}
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.zst();
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.home_page.good_details.t23
			});
		},
		methods: {
			drawChart() {
				var option = {
					//         tooltip: {
					//             trigger: 'axis',
					//             formatter: function (params) {
					//                 return '期号:'+'第' + params[0].data[0] + '期'+'<br>获得位置:' + parseInt(params[0].data[1])+'<br>区间段:'+params[0].data[3]+' <br>幸运码:'+params[0].data[2];
					//             },
					//             extraCssText:'font-size:0.24rem;line-height: 0.3rem;'
					//         },
					//         grid: {
					//             left: '0',
					//             right: '5%',
					//             bottom: '0%',
					//             containLabel: true
					//         },//最小期数
					   //      xAxis: {
					   //          // min: this.min_qishu,
					   //          // max: this.max_qishu,
					   //          //data: this.xAxisData,
					   //          type: 'category',
					   //          minInterval: 1,
					   //          splitLine:{show:false},
					   //          axisLine: {onZero: false},
					   //          axisLabel:{
					   //              textStyle : {
					   //                  fontSize : this.size
					   //              }
					   //          },
								// splitNumber :10
					   //      },
					//         yAxis: {
					//             min:0,
					//             max:this.max,
					//             type: 'value',
					//             axisLine: {
					//                 show: false
					//             },
					//             axisTick: {
					//                 show: false
					//             },
					//             interval:parseInt(this.max/5),
					//             axisLabel:{
					//                 interval: 0 ,
					//                 rotate:0,
					//                 textStyle : {
					//                     fontSize : this.size
					//                 }
					//             },

					//         },
					color: ["#ff8901"],
					dataZoom: [
						//在内部可以横向拖动
						    {
						        type: 'inside',// 内置于坐标系中
						        start: 40,
						        end: 100,
						        xAxisIndex: [0]
						    },
							//1.横向使用滚动条
							    {
							        type: 'slider',//有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
							        show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
							        start: 0,//数据窗口范围的起始百分比0-100
							        end: 50,//数据窗口范围的结束百分比0-100
							        xAxisIndex: [0],// 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
							        bottom: -10 //距离底部的距离
							    },
					],
					// series: [{
					//     type:'line',
					//     data: this.chartData,
					//     label: {
					//         normal: {
					//             show: true,
					//             position: 'top',
					//             backgroundColor:'#fff',
					//             color:'#000',
					//             fontSize: this.size,
					//             padding: [5, 5],
					//             borderRadius:[5],
					//         }
					//     },
					//     symbolSize:4,
					//     symbol: 'circle',

					// }],
					// dataZoom: [{
					//     type: 'inside',
					//     // startValue: this.min_qishu,
					//     // endValue: this.max_qishu,
					//     xAxisIndex: [0],
					//     // minValueSpan: this.min_qishu,
					//     // maxValueSpan:1000,
					//     preventDefaultMouseMove:false
					// }],
				};
				var categories = [],
					data = [];
					var size=this.chartData.length;
				for (var i in this.chartData) {
					categories[i] = this.chartData[size-1-i][0];
					data[i] = this.chartData[size-1-i][1];
				}
				//console.log(this.chartData)

				// ["2016", "2017", "2018", "2019", "2020", "2021"]  [100, 80, 95, 150, 112, 132]
				let linearareadata = {
					categories: categories,
					series: [{
						smooth: true,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgb(246, 202, 79)' // 0% 处的颜色
								}, {
									offset: 1,
									color: '#FFFFFF' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						data: data
					}]
				}
				this.chartsDataLine3 = linearareadata;
				this.eopts = option;
				// if (option && typeof option === "object") {
				//     this.myChart.setOption(option, true);
				// }
			},
			getPostion(totalBuyNum, goucount) {
				var qujianduan = Math.round((goucount / totalBuyNum) * 100);
				var qjd = "";
				if (qujianduan >= 0 && qujianduan <= 20) {
					qjd = this.i18n.home_page.good_details.t62 // "头";
				} else if (qujianduan > 20 && qujianduan <= 40) {
					qjd = this.i18n.home_page.good_details.t61 // "前";
				} else if (qujianduan > 40 && qujianduan <= 60) {
					qjd = this.i18n.home_page.good_details.t60 // "中";
				} else if (qujianduan > 60 && qujianduan <= 80) {
					qjd = this.i18n.home_page.good_details.t59 // "后";
				} else if (qujianduan > 80 && qujianduan <= 100) {
					qjd = this.i18n.home_page.good_details.t58 // "尾";
				}
				return qjd;
			},
			zst() {
				var that = this;
				var data = {
					goods_fight_id: that.id
				};
				getLotteryAssistantData(data).then(res => {
					if (res != null) {
						that.item = res.currentData;
						that.preItem = res.historyData[0];
						that.preUser = res.historyData[0];
						//that.preRecord = res.data.preRecord;
						that.list = res.historyData;
						that.product = res.currentData;
						that.max = that.product.zongrenshu;
						for (var index in that.list) {
							that.list[index].position = that.getPostion(that.max, that.list[index].goucount);
						}
						// if (that.product.pk > 0) {
						//     that.num = that.product.zongrenshu / that.product.pk;
						// }
						//that.myMoney();

						// if (that.preItem.seconds > 0) {
						//     that.seconds = that.preItem.seconds * 100;
						//     that.addDown();
						// } else if(that.preItem.seconds == 0 && that.preItem.q_uid == 0) {
						//     that.secondInfo = '正在揭晓中...';
						//     setTimeout(function(){
						//         that.getWin( that.preItem.id);
						//     }, 30);
						// }

						// that.flushId = setInterval(function(){
						//     if (that.time-- == 0) {
						//         that.time = 3;
						//         that.zstTime();
						//     }
						// }, 1000);


						//画图
						if (that.list.length > 0) {
							that.max_qishu = that.list[0].qishu;
							that.min_qishu = that.list[that.list.length - 1].qishu;
							that.chartData.length = 0;
							for (var i in that.list) {
								that.chartData.push([
									that.list[i].qishu,
									that.list[i].goucount,
									that.list[i].q_user_code,
									that.list[i].position,
									that.list[i].q_user,
									that.list[i].goucount
								])
							}
							that.drawChart();
						}
					} else {
						that.$util.Tips({
							title: "System abnormal"
						});
					}
				});
			},
			//请求抽奖详情页面
			lotteryDetail(item) {
				console.log(item.id)
				uni.navigateTo({
					url: '/pages/lottery/good_details/good_details?id=' + item.id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
@import "@/common/font.css";
	.charts-box {
		width: 100%;
		height: 750rpx;
		margin-top: 20px;
		background: #fff;
		border-radius: 10px;
	}

	.left-chart {
		width: 60rpx;
		height: 710rpx;
		background: #ff8b05;
		color: #fff;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		border-radius: 5px;
		font-size: 13px;
		padding: 0 2px;
		margin: 5px 0;
	}

	.chart {
		height: 200px;
		margin: 0px;
		padding: 0px;
	}

	.d-second {
		color: rgb(153, 153, 153);
		margin-right: 5px;
	}

	.mescroll {
		position: fixed;
		top: 0px;
		bottom: 120px;
		height: auto;
		max-width: 500px;
	}

	.lineChart {
		font: 12px/18px "Microsoft YaHei" !important;
	}

	.item-info {
		width: 100%;
		background: #fff;
		border-radius: 10px;
	}

	.img-div {
		margin-left: 10px;
		width: 184upx;
		max-height: 200upx;
		img{
			max-width: 184upx;
			max-height: 200upx;
		}
	}

	.item-info-right {
		height: 100%;
		min-height: 60px;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: start;
		-webkit-align-items: flex-start;
		align-items: flex-start;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding: 0 10px;
	}

	.item-info-title {
		width: 100%;
		font-size: 13px;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.burt_ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
 }
	.header{
		    background:#ff8b05;
		    color: #fff;
		    border-radius: 5px;
	}
	.item-list{
		height: 25px;
		text-align: center;
		font-size: 12px;
	}
	
	.body{
		    font-weight: 500;
		    font-size: 1.05em;
		    font-family: Microsoft YaHei,ËÎÌå,Segoe UI,Lucida Grande,Helvetica,Arial,sans-serif,FreeSans,Arimo;
	}
</style>
